Injecting JavaScript on Client Site

You can inject client.js and R3 values on the client site using the <script> tag inside the webpage's html or edit the JavaScript file if already included on the page to load the dynamic experience rendering JavaScript code. Inject the JavaScript for the Item Page, List Page, and Cart Page.

Perform the below actions to inject JavaScript on different page levels:

Set a global R3_COMMON object that contains the required key values which will evaluate and render the respective Social Proof Dynamic Experience.
Specify the correct values for all the keys. Replace "xxxx" below with the corresponding values.
Remove the comments from the code.
Copy and paste the script before the end of <body> tag. If you have already multiple <script> tags, paste them at the end.
Paste the same on the webpage where the dynamic experience needs to be rendered.

Notes:

If your website is making requests to https://recs.richrelevance.com, you should configure the baseUrl: https://xxx.recs.richrelevance.com/rrserver/ and load the JavaScript from https://cdn.richrelevance.com/dashboard/applications/clientjs/2.0/client.js.
The example code snippets use https://algorecs.com as the primary domain, assuming that customers have already transitioned their main instrumentation from https://recs.richrelevance.com to the latest version.

Injecting Native First-party JavaScript on the Item Page

Copy

<script>
        window.R3_COMMON = {
            apiKey: "xxxxxxxxxxx", //this is the API key which we get by following the steps mentioned above as "Getting API Key" under Prerequisites
            apiClientKey: "xxxxxxxxxxxx",  //this is the API Client key which we get by following the steps mentioned above as "Getting API Client Key" under Prerequisites
            baseUrl: "https://xxxx.algorecs.com/rrserver/",  // Replace the sub-domain "xxxx" with "qa" or "recs" based on the env viz. either qa or prod.
            sessionId: "xxxx-xxxx-xxxx-xxxx", //session id of the user. This could be any valid session id 
            userId: "",  //we can leave it blank
            placements: "item_page" //this specifies the type of page against which the experience had been designed. It should be correct to get right experience
        };
        window.R3_ITEM = { id: "xxxxxxxx" }; //It is the item id of the product which is being rendered on web page
 
        // Now load client js from RR CDN to play dynamic placement for social proofing
        let firstHead = document.getElementsByTagName("head").item(0);
        let clientScript = document.createElement("script");
        clientScript.setAttribute("type", "text/javascript");
        clientScript.setAttribute(
            "src",
            "https://cdn.algorecs.com/dashboard/applications/clientjs/2.1/client.js"
        );
        firstHead.appendChild(clientScript);
<script>

Injecting JavaScript on the List Page

Copy

<script>
        window.R3_COMMON = {
            apiKey: "xxxxxxxxxxx", //this is the API key which we get by following the steps mentioned above as "Getting API Key" under Prerequisites
            apiClientKey: "xxxxxxxxxxxx",  //this is the API Client key which we get by following the steps mentioned above as "Getting API Client Key" under Prerequisites
            baseUrl: "https://xxxx.algorecs.com/rrserver/",  // Replace the sub-domain "xxxx" with "qa" or "recs" based on the env viz. either qa or prod
            sessionId: "xxxx-xxxx-xxxx-xxxx", //session id of the user. This could be any valid session id 
            userId: "",  //we can leave it blank
            placements: "category_page", //this specifies the type of page against which the experience had been designed. It should be correct to get right experience
            itemIds:"itemid_1|itemid_2|itemid_3|itemid_4|itemid_5|itemid_6...." //replace the itemids with the actual id of items that should be render on the list page
        };

        // Now load client js from RR CDN to play dynamic placement for social proofing
        let firstHead = document.getElementsByTagName("head").item(0);
        let clientScript = document.createElement("script");
        clientScript.setAttribute("type", "text/javascript");
        clientScript.setAttribute(
            "src",
            "https://cdn.algorecs.com/dashboard/applications/clientjs/2.1/client.js"
        );
        firstHead.appendChild(clientScript);
<script>

The HTML code for the item in the list page should look like below:

Copy

<a href="link_to_product_detail_page" data-itemid="itemId_1">
        //some code here. Mostly the <img /> tag, which contains the image of the product or item
</a>

Injecting JavaScript on Cart Page

Copy

<script>
        window.R3_COMMON = {
            apiKey: "xxxxxxxxxxx", //this is the API key which we get by following the steps mentioned above as "Getting API Key" under Prerequisites
            apiClientKey: "xxxxxxxxxxxx",  //this is the API Client key which we get by following the steps mentioned above as "Getting API Client Key" under Prerequisites
            baseUrl: "https://xxxx.algorecs.com/rrserver/",  // Replace the sub-domain "xxxx" with "qa" or "recs" based on the env viz. either qa or prod
            sessionId: "xxxx-xxxx-xxxx-xxxx", //session id of the user. This could be any valid session id 
            userId: "",  //we can leave it blank
            placements: "cart_page", //this specifies the type of page against which the experience had been designed. It should be correct to get right experience
            itemIds:"itemid_1|itemid_2|itemid_3|itemid_4|itemid_5|itemid_6...." //replace the itemids with the actual id of items that should be render on the list page
        };
 
        // Now load client js from RR CDN to play dynamic placement for social proofing
        let firstHead = document.getElementsByTagName("head").item(0);
        let clientScript = document.createElement("script");
        clientScript.setAttribute("type", "text/javascript");
        clientScript.setAttribute(
            "src",
            "https://cdn.algorecs.com/dashboard/applications/clientjs/2.1/client.js"
        );
        firstHead.appendChild(clientScript);
<script>

The HTML code for the item in the cart page should look like below:

Copy

<a href="link_to_product_detail_page" data-itemid="itemId_1">
        //some code here. Mostly the <img /> tag, which contains the image of the product or item
</a>

Notes:

For more information on how first-party Personalization client-side experience has been enhanced using API Gateway as a Reverse Proxy, refer to RR Domain Reverse Proxy.
For more information about the native first-party p13n.js, refer to JSON Integration Overview.
The configuration for baseUrl and the CDN link to be used in the JavaScript depends on the domain currently utilized in the customer's instrumentation. The platform supports the following domains 1): https://algorecs.com and 2) https://recs.richrelevance.com.